<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form1.html</title>
</head>
<body>
<style>
#title{
	color:#555555; font-size:20px;
	border:2px solid #aaaaaa;
	padding:10px;
	padding-left:20px;
	border-top-left-radius:10px;
	box-shadow:3px 3px 7px #cccccc;
	background-color: #ffffee;
	border-right-width:10px;
}
body, input, select{
	font-size:16px;
}
input{
	padding:6px;
	box-shadow:1px 1px 5px #cccccc;
}
#btnChk{
	background-image: url(../icon/icon4.png);
	background-repeat: no-repeat;
	background-position:4px 5px ;
	padding:10px; width:90px;
	text-align: right;
	border-radius:9px;
}
#sel{
	font-family: 휴먼편지체;font-size:30px;
	background-color: #ffffcc;
	padding:2px;
}
fieldset{
	background-color:#eeffee;
	border-top-right-radius:20px;
	border-bottom-left-radius:30px;
	border-bottom-right-radius:30px;
	box-shadow:3px 6px 9px #aaaaaa;
}
legend{
	border:3px solid #ffffff;
	padding:8px;
	background-color: #333333;
	color:#ffffff;font-weight:bold;
	font-size:20px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	box-shadow:3px 3px 2px #aaaaaa;
	margin-bottom:20px;
}
#result{
	border-width:8px;
	width:96%;
	background-image: url(../images/back6.png);
	background-repeat: repeat-y;
	background-attachment:scroll;
	font-size:18px;
	font-weight:bold;
	line-height: 34px;
	
	
}
</style>
<script>
window.onload = function(){
	var btn = document.getElementById("btnChk");
	btn.onclick = function(){
		var temp;
		var ff = document.frm;
		var ff2 = document.frm2;
		
		var str = "";
		str += "ID : " + ff.mid.value + "\n";
		str += "PWD : " + ff.pwd.value + "\n";
		str += "Address : " + ff.address.value + "\n";
		str += "Phone : " + ff.phone.value + "\n";
		//radio
		for(var i=0 ; i<ff.gender.length; i++){
			if(ff.gender[i].checked){
				str += "Gender : " + ff.gender[i].value + "\n";
				
				break;
			}
		}
		// hobby
		str += "Hobby : ";
		temp = new Array();
		pos=0;
		for(var i=0 ; i<ff.hobby.length; i++){
			if(ff.hobby[i].checked){
				temp[pos] = ff.hobby[i].value;
				pos++;
			}
		}
		
		str += temp + "\n";
		
		str += "Email : " + ff2.email.value + "\n";
		str += "Age : " + ff2.age.value + "\n";
		str += "HP : " + ff2.hp.value + "%\n";
		str += "Birth Day : " + ff2.birthday.value + "\n";
		str += "Birth Time : " + ff2.birthtime.value + "\n";
		str += "document : " + ff2.doc.value + "\n";
		str += "Color : " + ff2.color.value + "\n";
		
		// study
		str += "Study : " + ff2.study[ff2.study.selectedIndex].text + "\n";
		
		
		
		
		frm2.result.value = str;
	}
	
}
</script>
</head>
<body>
<h1 id='title'>Form Tag Example</h1>
<form name='frm' action='' method='post'>
<fieldset>
<legend>1.사용자 기본 정보 입력란</legend>
내 아이디는 
<input type='text' name='mid' value='park'
		maxlength='10' size='10'>
으로 설정하고, 암호는
<input type='password' name='pwd' value='1111'
		maxlength='10' size='10'>
으로 정하고 싶소.<p/>

내 주소는
<input type='search' name='address' size='70' 
 	   value='제주도 제주시' maxlength='70'> 
이고,<br/> 
연락처는
<input type='search' name='phone' size='15'
       value='010-6351-3491' maxlength='15'>
이라오.<p/>
나는 [
<label><input type='radio' value='m' 
		name='gender' >남자</input></label>
<label><input type='radio' value='f' 
		name='gender' >여자</input></label>
<label><input type='radio' value='a' 
		name='gender'>혹시</input> ]</label>
이지요. ^^ <p/>
또한 저의 취미로는<p/>
[<label><input type='checkbox' name='hobby'
		value='독서'>독서</label>
<label><input type='checkbox' name='hobby'
		value='낚시'>낚시</label>
<label><input type='checkbox' name='hobby'
		value='등산'>등산</label>
<label><input type='checkbox' name='hobby'
		value='스쿠버'>스쿠버</label>
<label><input type='checkbox' name='hobby'
		value='글라이딩'>글라이딩</label>
<label><input type='checkbox' name='hobby'
		value='여행'>여행</label>]
을(를) 즐기고 있지요. <p/>
저의 프로필 사진은 
<input type='file' name='photo'>
을 참고하시면 될듯.ㅋㅋㅋ<p/>

이곳까지는 사용자 기본정보 이므로 그냥 
<input type='button' value='전송'> 하시면 됩니다.

</fieldset>
		
</form>

<p><br/>
하단에 기술되는 정보는 사용자 선택에 의해 추가 
전송될 수 있는 정보입니다.
<br/>
<p/>

<fieldset>
<legend>2.사용자 추가 정보 입력란</legend>
<form name='frm2' action='' method='post'>
저에게 주시는 유익한 정보는
<input type='email' size='20' name='email'
    value='hipwg@naver.com'> 으로 보내 주세요.
<p/>
저의 나이는 
<input type='number' min='1' max='200' name='age'
       value='20'> 살이고, 체력은
<input type='range' min='0' max='100' name='hp'
	   value='100' step='10'>
퍼센트 충전되어 있다고 생각 하지요. ㅋㅋㅋ <p/>
아차차...제 생일선물은 
<input type='date' name='birthday'>에 맞추어서
보내 주세요.<p/>

제가 태어난 시간은 
<input type='time' name='birthtime'>에
태어난지라 좋아하는 색상은
<input type='color' name='color'> 이네요.<p/>
끝으로 제가 부탁하고 싶은 이야기는<br/>
<textarea cols='50' rows='6' name='doc'>
예쁘게 봐주면 안돼겠니~~~~~
</textarea>
<p/>
<hr/>
님께서 수강하실 과정의 커리큘럼의 상세내용입니다.<p/>
<select name='study'>
	<optgroup label='Java'>
		<option>자바 개론
		<option>변수 상수
		<option>제어문...
	</optgroup>

	<optgroup label='HTML'>
		<option>태그의 종류
		<option>HTML5의 특징
		<option>웹표준과 접근성
	</optgroup>

	<optgroup label='Ajax'>
		<option>자바 스크립트
		<option>XMLHttpRequest
		<option>Suggest 기능 구현
	</optgroup>
</select>
</fieldset>

<p/><br/>
<h1>Report....
	<input type='button' value='확인'
       id='btnChk'>          
</h1>
<textarea rows="20" cols="80"
	id='result' name='result'>
aaaaaa
bbbbbb
cccccc
dddddd
eeeeee
ffffff	
</textarea>
<p/>

</form>

</body>
</html>